<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order</title>
    <link rel="stylesheet" href="./assets/css/admin.css">
    <link rel="stylesheet" href="./assets/css/amazeui.css">
    <link rel="stylesheet" href="./assets/css/amazeui.flat.css">
    <link rel="stylesheet" href="./assets/css/amazeui.flat.min.css">
    <link rel="stylesheet" href="./assets/css/amazeui.min.css">
    <link rel="stylesheet" href="./assets/css/app.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/order.css">
    <!-- 先引入jquery,order.js中的代码需要jquery -->
    <!-- <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.bundle461.min.js"></script> -->
    <script src="./js/jquery.js"></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./js/API/order.js"></script>
    <script src="./assets/js/amazeui.min.js"></script>
  
</head>
<body style="position:relative;overflow-x:hidden;overflow-y:scroll;scrollbar-base-color:hotpink">
    
        <!-- 导航栏start -->
    <header style="background-color: #ffffff;">
        <div class="container-fluid">
            <div class="header_content">
                <!-- logo图 -->
                <div class="header_logo">
                    <a href="index.html">
                        <img src="images/logo.jpg" alt="LOGO">
                    </a>
                </div>
                <!-- 导航栏搜索 -->
               <form action="#" class="header_search ms-auto">
                    <input type="text" class="form-control" placeholder="搜你想要">
                    <button type="button">
                        <i class="fa fa-search"></i>
                      </button>
                </form>
                <!-- 导航栏中间按钮 -->
                <div class="header_menu">
                    <ul class="header_nav">
                        <li>
                            <a class="header_nav_link" href="index.html" role="button">首页推荐</a>
                        </li>
                        <li>
                            <a class="header_nav_link" href="#" role="button" id="digital-area">数码专区</a>
                        </li>
                        <li>
                            <a class="header_nav_link" href="message.html"" role="button">我的消息</a>
                        </li>
                    </ul>
                </div>
                <!-- 导航栏侧边 -->
                <div class="header_action">
                <ul class="header_action_nav">
                    <li>
                        <div class="dropdown">
                            <a class="header_sign dropdown-toggle" id="login_region" href="#" role="button" data-toggle="dropdown" aria-expanded="false">登录/注册</a>
                                <div class="dropdown-menu" aria-labelledby="login">
                                    <a class="dropdown-item" id="dropdown-login-item" href="login.html">登录</a>
                                    <a class="dropdown-item" id="dropdown-exit-item" >退出</a>
                                </div>
                        </div>
                    </li>
                    <li>
                        <a class="header_sign" role="button" id="person_center">个人中心</a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- 导航end -->
        
    <!-- 订单主体 -->
    <div class="order_detail">
        <!-- 订单状态 -->
        <ul class="am-nav am-nav-pills am-nav-justify am-nav-tabs" style="height:51px;font-size: 20px;margin-top: 50px;border: 1px,solid,rgb(122, 116, 116);">
            <li  id="five" class="am-active li_style"><a>待支付</a></li>
            <li  id="one" class="li_style"><a>待发货</a></li>
            <li  id="two" class="li_style"><a>待收货</a></li>
            <li  id="three" class="li_style"><a>正在租用</a></li>
            <li  id="seven" class="li_style"><a>待商家确认</a></li>
            <li  id="four" class="li_style"><a>已结束</a></li>
            <li  id="six" class="li_style"><a>售后</a></li>
        </ul>
        <!-- 待支付 -->
        <div id="daizhifu" style="margin-bottom: 283px;">
            <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;width: 1200px;">
                <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                    <tr  style="font-size: 20px;">
                        <th>租物</th>
                        <th>订单号</th>
                        <th>商家</th>
                        <th>租金</th>
                        <th>创建时间</th>
                        
                        <th>支付</th>
                    </tr>
                </thead>
                <tbody class="td" id="tbodyfive">
                </tbody>
            </table>
        </div>

        <!-- 待发货 -->
        <div id="daifahuo" class="hidden" style="margin-bottom: 283px;margin-top: 10px;">
            <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;width: 1200px;">
                <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                    <tr  style="font-size: 20px;margin-left:50%;left: -width/2;">
                        <th>租物</th>
                        <th>订单号</th>
                        <th>商家</th>
                        <th>租金</th>
                        <th>订单创建时间</th>
                    </tr>
                </thead>
                <tbody class="td" id="tbodyone">
                </tbody>
            </table>
        </div>

        <!-- 待收货 -->
        <div id="daishouhuo" class="hidden" style="margin-bottom: 283px;margin-top: 10px;">
            <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;width: 1200px;">
                <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                    <tr  style="font-size: 20px;">
                        <th>租物</th>
                        <th>订单号</th>
                        <th>商家</th>
                        <th>租金</th>
                        <th>订单创建时间</th>
                        <th>确认收货</th>
                    </tr>
                </thead>
                <tbody class="td" id="tbodytwo" >
                </tbody>
            </table>
        </div>

        <!-- 正在租用 -->
        <div id="zuyong" class="hidden"  style="margin-bottom: 283px;margin-top: 10px;">
            <!-- 续租modal -->
            <div class="am-modal am-modal-alert" tabindex="-1" id="xuzu">
                <div class="am-modal-dialog">
                <div class="am-modal-hd">续租信息</div>
                <div class="am-modal-bd">
                    <input id="zone" placeholder="请输入租赁模式（日租/月租）" style="width: 60%;border: 1px solid #ccc;box-sizing: border-box;height: 50px;text-indent: 10px;border-radius: 4px;font-size: 13px;">
                    <br>
                    <input id="ztwo" placeholder="请输入租赁天数/月数" style="width: 60%;border: 1px solid #ccc;box-sizing: border-box;height: 50px;text-indent: 10px;border-radius: 4px;font-size: 13px;margin-top: 20px;">
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn" id="xuzubtn">确定</span>
                </div>
                </div>
            </div>
            <!-- 商家信息modal -->
            <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert-three">
                <div class="am-modal-dialog">
                <div class="am-modal-hd" style="font-size: 35px;">商家信息</div>
                <div class="am-modal-bd">
                    <p id="ppone" style="font-size: 25px;">666</p>
                    
                    <p id="pptwo" style="font-size: 25px;">666</p>
                    
                    <p id="ppthree" style="font-size: 25px;">666</p>
        
                </div>
                <div class="am-modal-footer">
                    <span class="am-modal-btn">确定</span>
                </div>
                </div>
            </div>
            <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;width: 1200px;">
                <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                    <tr  style="font-size: 20px;">
                        
                        <th>租物</th>
                        <th>订单号</th>
                        <th>商家</th>
                        <th>租金</th>
                        <th>创建时间</th>
                        <th>结束时间</th>
                        
                        <th>续租</th>
                        <th>先租后买</th>
                        <th>退货</th>
                        <th>用完寄回</th>
                        <th>确认寄回</th>
                    </tr>
                </thead>
                <tbody class="td" id="tbodythree">

                </tbody>
            </table>
        </div>

        <!-- 待商家确认 -->
        <div id="daiqueren_" class="hidden"  style="margin-bottom: 283px;margin-top: 10px;">
            
            <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;width: 1200px;">
                <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                    <tr  style="font-size: 20px;">
                        <th>租物</th>
                        <th>订单号</th>
                        <th>商家</th>
                        <th>租金</th>
                        <th>创建时间</th>
                    </tr>
                </thead>
                <tbody class="td" id="tbodyseven">

                </tbody>
            </table>
        </div>

        <!-- 已结束 -->
        <div id="jieshu" class="hidden" style="margin-bottom: 283px;margin-top: 10px;">
            <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;width: 1200px;">
                <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                    <tr  style="font-size: 20px;">
                        <th>租物</th>
                        <th>订单号</th>
                        <th>商家</th>
                        <th>租金</th>
                        <th>订单创建时间</th>
                    </tr>
                </thead>
                <tbody class="td" id="tbodyfour">
                </tbody>
            </table>
        </div>

        <!-- 售后 -->
        <div id="shouhou" class="hidden" style="margin-bottom: 283px;margin-top: 10px;">
            <div class="am-g">
                <ul class="am-nav am-u-sm-2 am-nav-tabs" style="height:0px;font-size: 20px;margin-top: 51px;"> 
                    <li  id="daichuli" class="am-active"><a>待商家处理</a></li>
                    <li  id="daituihui"><a>待用户退回</a></li>
                    <li  id="daiqueren"><a>待商家确认</a></li>
                </ul>
            </div>
        
            <div id="first" style="height:0px;font-size: 20px;margin-top: -52px;">
                <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert-one">
                    <div class="am-modal-dialog">
                    <div class="am-modal-hd">订单详情</div>
                    <div class="am-modal-bd">
                        <p id="pone">666</p>
                        
                        <p id="ptwo">666</p>
                        
                        <p id="pthree">666</p>

                        <p id="pfour">666</p>
            
                    </div>
                    <div class="am-modal-footer">
                        <span class="am-modal-btn">确定</span>
                    </div>
                    </div>
                </div>
                <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;">
                    <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                        <tr  style="font-size: 20px;margin-left:50%;left: -width/2;" >
                            <!-- <th>租物</th> -->
                            <th>订单号</th>
                            <!-- <th>商家</th>
                            <th>租金</th>
                            <th>订单创建时间</th> -->
                            <th>申请退货原因</th>
                            <th>订单详情</th>
                        </tr>
                    </thead>
                    <tbody class="td" id="chuli">
                    </tbody>
                </table>
                
            </div>
            <div id="second" class="hidden" style="height:0px;font-size: 20px;margin-top: -52px;">
                <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert-two">
                    <div class="am-modal-dialog">
                    <div class="am-modal-hd">商家信息</div>
                    <div class="am-modal-bd">
                        <p id="pppone">666</p>
                        
                        <p id="ppptwo">666</p>
                        
                        <p id="pppthree">666</p>
            
                    </div>
                    <div class="am-modal-footer">
                        <span class="am-modal-btn">确定</span>
                    </div>
                    </div>
                </div>
                <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;">
                    <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                        <tr  style="font-size: 20px;margin-left:50%;left: -width/2;">
                            <th>订单号</th>
                            <th>我要退回</th>
                            <th>确认退回</th>
                        </tr>
                    </thead>
                    <tbody class="td" id="tuihui">
                    </tbody>
                </table>
            </div>
            <div id="third" class="hidden" style="height:0px;font-size: 20px;margin-top: -52px;">
                <table class="am-table table am-table-striped am-table-hover" style="border-collapse:separate; border-spacing:0px 10px;">
                    <thead style="text-align:center;margin-left: auto;margin-right: auto;align-content:center;">
                        <tr  style="font-size: 20px;margin-left:50%;left: -width/2;">
                            <th>租物</th>
                            <th>订单号</th>
                            <th>商家</th>
                            <th>租金</th>
                            <th>订单创建时间</th>
                        </tr>
                    </thead>
                    <tbody class="td" id="queren">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
    <!-- Section: Social media -->
    <section
      class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
    >
      <!-- Left -->
      <div class="me-5 d-none d-lg-block">
        <span>Get connected with us on social networks:</span>
      </div>
      <!-- Left -->
  
      <!-- Right -->
      <div>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-facebook-f"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-twitter"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-google"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-instagram"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-linkedin"></i>
        </a>
        <a href="" class="me-4 text-reset">
          <i class="fa fa-github"></i>
        </a>
      </div>
      <!-- Right -->
    </section>
    <!-- Section: Social media -->
  
    <!-- Section: Links  -->
    <section class="">
      <div class="container text-center text-md-start mt-5">
        <!-- Grid row -->
        <div class="row mt-3">
          <!-- Grid column -->
          <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
            <!-- Content -->
            <h6 class="text-uppercase fw-bold mb-4">
              <i class="fas fa-gem me-3"></i>租好玩
            </h6>
            <p>
                投资有风险，购买需谨慎
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              产品
            </h6>
            <p>
              <a href="#!" class="text-reset">数码</a>
            </p>
            <p>
              <a href="#!" class="text-reset">生活</a>
            </p>
            <p>
              <a href="#!" class="text-reset">娱乐</a>
            </p>
            <p>
              <a href="#!" class="text-reset">工作</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              关于我们
            </h6>
            <p>
              <a href="#!" class="text-reset">经营证照</a>
            </p>
            <p>
              <a href="#!" class="text-reset">平台协议</a>
            </p>
            <p>
              <a href="#!" class="text-reset">隐私政策</a>
            </p>
            <p>
              <a href="#!" class="text-reset">免责声明</a>
            </p>
          </div>
          <!-- Grid column -->
  
          <!-- Grid column -->
          <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
            <!-- Links -->
            <h6 class="text-uppercase fw-bold mb-4">
              联系我们
            </h6>
            <p><i class="fa fa-home me-3"></i> New York, NY 10012, US</p>
            <p>
              <i class="fa fa-envelope me-3"></i>
              zuhaowan@example.com
            </p>
            <p><i class="fa fa-phone me-3"></i> + 01 234 567 88</p>
            <p><i class="fa fa-print me-3"></i> + 01 234 567 89</p>
          </div>
          <!-- Grid column -->
        </div>
        <!-- Grid row -->
      </div>
    </section>
    <!-- Section: Links  -->
  
    <!-- Copyright -->
    <div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
      © 2021 Copyright:
      <a class="text-reset fw-bold" href="#">zuhaowan.com</a>
    </div>
    <!-- Copyright -->
  </footer>
  <!-- Footer -->
     
</body>

<!-- <script src="../javascript/jquery-3.6.0.min.js"></script> -->
<!-- <script src="../javascript/bootstrap.bundle.min.js"></script>
<script src="../javascript/bootstrap.min.js"></script> -->
<script>
    $("#person_center").click(function(){
        if($.cookie("status")==0){
            alert("请先登录！");
            return
        }
        else if($.cookie("status")==1){
            window.open("personalCenter.html");
        }
    })
</script>
</html>